<template>
  <div class="app-container">
    <el-card>
      <el-form :model="searchForm" :inline="true" size="mini">
        <el-form-item label="分类名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入分类名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            clearable
            v-model="searchForm.enableStatus"
            placeholder="请选择"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="getList()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-button
          size="mini"
          icon="el-icon-plus"
          type="primary"
          @click="addCate()"
          >添加分类</el-button
        >
      </div>
      <el-table
        :data="tableData.data"
        v-loading="listLoading"
        row-key="id"
        style="width: 100%; margin-top: 10px"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="80"
          align="center"
        ></el-table-column>

        <el-table-column prop="name" label="分类名称" align="center">
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              size="small"
              :type="scope.row.enableStatus == 1 ? 'success' : 'danger'"
              >{{ scope.row.enableStatus == 1 ? "正常" : "停用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="C端是否可用" align="center">
          <template slot-scope="scope">
            {{ scope.row.clientStatus == 0 ? '隐藏' : '可用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          sortable
          prop="createTime"
        >
        </el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="note"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.level <= 0"
              type="text"
              @click="addChildCate(scope.row)"
              >新增</el-button
            >
            <el-button size="mini" type="text" @click="editCate(scope.row)"
              >编辑</el-button
            >
            <el-button :disabled="scope.row.id == 1" size="mini" type="text" @click="delCate(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="添加分类"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose"
      >
        <el-form
          :model="detailForm"
          :rules="detailRules"
          ref="detailForm"
          label-width="140px"
          size="small"
        >
          <el-form-item label="上级分类：" prop="parentId">
            <el-input
              v-model="detailForm.parentName"
              placeholder="请选择上级分类"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="分类名称：" prop="name">
            <el-input v-model="detailForm.name"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input-number v-model="detailForm.sort" :min="1" :max="99999" />
            <!--            <el-input type="number" v-model="detailForm.sort"></el-input>-->
          </el-form-item>
          <el-form-item label="状态：" prop="deleteStatus">
            <el-radio-group v-model="detailForm.enableStatus">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="C端是否可用：" prop="deleteStatus">
            <el-radio-group v-model="detailForm.clientStatus">
              <el-radio :label="1">可用</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述：" prop="note">
            <el-input
              show-word-limit
              type="textarea"
              maxlength="50"
              v-model="detailForm.note"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center">
              <el-button
                style="width: 100px"
                type="primary"
                @click="onSubmit('detailForm')"
                >确定</el-button
              >
              <el-button style="width: 100px" @click="handleClose()"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
const form = {
  parentId: "",
  parentName: "",
  name: "",
  sort: "",
  enableStatus: 1,
  clientStatus: 1,
  note: ""
};
import {
  addArticleCate,
  getArticleCateList,
  editArticleCate,
  deleteArticleCate
} from "@/api/article";
export default {
  name: "cate",
  data() {
    return {
      searchForm: {
        name: "",
        enableStatus: ""
      },
      listLoading: false,
      dialogVisible: false,
      tableData: {
        data: []
      },
      detailForm: Object.assign({}, form),
      detailRules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 64, message: "长度在 1 到 64 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    reset() {
      this.searchForm = {
        name: "",
        enableStatus: ""
      };
      this.getList();
    },
    editCate(row) {
      this.detailForm = {
        id: row.id,
        parentId: row.parentId,
        parentName: row.parentName,
        name: row.name,
        sort: row.sort,
        enableStatus: row.enableStatus,
        clientStatus: row.clientStatus,
        note: row.note
      };
      this.dialogVisible = true;
    },
    delCate(row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteArticleCate(row.id).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch();
    },
    onSubmit() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          delete this.detailForm.parentName;
          this.detailForm.id
            ? editArticleCate(this.detailForm).then(res => {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.dialogVisible = false;
                this.getList();
              })
            : addArticleCate(this.detailForm).then(res => {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.dialogVisible = false;
                this.getList();
              });

          setTimeout(() => {
            this.resetFormDia();
          }, 200);
        } else {
          return false;
        }
      });
    },
    getList() {
      this.listLoading = true;
      getArticleCateList(this.searchForm)
        .then(res => {
          this.tableData.data = res.data;
          this.addParentName(this.tableData.data);
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },

    addChildCate(row) {
      this.detailForm.parentId = row.id;
      this.detailForm.parentName = row.name;
      this.dialogVisible = true;
    },

    addCate() {
      this.detailForm.parentName = "主分类";
      this.detailForm.parentId = "0";
      this.dialogVisible = true;
    },
    resetFormDia() {
      this.detailForm = {
        id: "",
        parentId: "",
        parentName: "",
        name: "",
        sort: "",
        enableStatus: 1,
        clientStatus: 1,
        note: ""
      };
    },
    handleClose() {
      this.$refs.detailForm.resetFields();
      this.dialogVisible = false;
      setTimeout(() => {
        this.resetFormDia();
      }, 200);
    },
    addParentName(data) {
      data.forEach(item => {
        if (item.children && item.children.length > 0) {
          item.children.forEach(child => {
            child.parentName = item.name;
          });
          this.addParentName(item.children);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
